<template>
    <div class="sales-chart-page">
        <h1>每月销售额</h1>
        <!-- 图表容器 -->
        <div ref="chartRef" class="chart-container"></div>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';
import request from '@/utils/request';

// 图表实例引用
const chartRef = ref(null);
let myChart = null;

// 模拟从后端获取每月销售额数据
const fetchSalesData = async () => {
    try {
        // 这里使用axios示例，若用request，替换为request.get('/api/sales')等
        const response = await request.get('/sales/monthly');
        return response.data;
    } catch (error) {
        console.error('获取销售额数据失败：', error);
        return {
            months: ['1月', '2月', '3月', '4月', '5月', '6月'],
            sales: [12000, 19000, 16000, 21000, 25000, 22000]
        }; // 模拟数据
    }
};

onMounted(async () => {
    // 获取数据
    const data = await fetchSalesData();
    const { months, sales } = data;

    // 初始化图表
    myChart = echarts.init(chartRef.value);

    // 配置图表选项
    const option = {
        title: {
            text: '每月销售额统计'
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: months
        },
        yAxis: {
            type: 'value',
            name: '销售额（元）'
        },
        series: [
            {
                data: sales,
                type: 'bar', // 柱状图，也可改为'line'为折线图
                name: '销售额'
            }
        ]
    };

    // 设置图表选项并渲染
    myChart.setOption(option);

    // 窗口resize时，图表自适应
    window.addEventListener('resize', () => {
        if (myChart) {
            myChart.resize();
        }
    });
});

// 组件销毁时，销毁图表实例，释放资源
onUnmounted(() => {
    if (myChart) {
        myChart.dispose();
        myChart = null;
    }
});
</script>

<style scoped>
.sales-chart-page {
    padding: 20px;
}

.chart-container {
    width: 100%;
    height: 400px;
    margin-top: 20px;
}
</style>